<template>
  <div style="height: 100%; width: 100%; position: relative">
      <div class="pagetop">
          <table class="table2style" style="width: 100%; font-size: 12px" border="0">
              <col style="width: 5%" />
              <col style="width: 15%" />
              <col style="width: 10%" />
              <col style="width: 10%" />
              <col style="width: 10%" />
              <col style="width: 50%" />
              <tr>
                  <td style="text-align: right;width: 80px">统计模式</td>
                  <td>
                      <el-radio-group v-model="qmode" style="padding: 0px 10px" size="mini" @change="modeChange()">
                          <el-radio-button label="0">仪器，批号，水平</el-radio-button>
                          <el-radio-button label="1">检验组</el-radio-button>
                      </el-radio-group>
                  </td>
              </tr>
              <tr>
                  <td style="text-align:right">统计日期
                      <!-- <el-dropdown @command="handleCommand" style="font-size: 12px;">
                          <u class="el-dropdown-link">
                              {{ datename }}
                          </u>
                           <td style="text-align: right;width: 80px">统计日期</td> -->
                      <!-- <el-dropdown-menu slot="dropdown">
                              <el-dropdown-item command="统计月份">
                                  <font font-size="12px">统计月份</font>
                              </el-dropdown-item>
                              <el-dropdown-item command="统计日期">
                                  <font font-size="12px">统计日期</font>
                              </el-dropdown-item>
                          </el-dropdown-menu>
                      </el-dropdown> -->
                  </td>
                  <!-- <td v-if="daytype=='0'">
                      <el-date-picker v-model="datemonth" type="month" placeholder="按月份统计" value-format="yyyy-MM-dd 00:00:00" size="mini" :clearable="true" style="width: 100%;min-width: 130px"></el-date-picker>
                  </td> -->
                  <!-- <td v-if="daytype=='1'"> -->
                  <td>
                      <el-date-picker v-model="sel_startdt" :able="false" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width: 130px" :clearable="false" @change="clearTableData"> </el-date-picker>至 <el-date-picker v-model="sel_enddt" type="date" :able="false" placeholder="选择日期" value-format="yyyy-MM-dd" style="width: 130px" :clearable="false" @change="clearTableData"> </el-date-picker>
                  </td>
                  <td v-if="qmode=='1'">
                      <el-checkbox true-label="1" false-label="0" v-model="ishaverptitem">仅统计有数据的工作组</el-checkbox>
                  </td>
                  <td colspan="9" align="right">
                      <el-button icon="el-icon-search" v-has="'PINQUERY'" type="primary" @click="btnQuery">查询</el-button>
                      <!-- <el-button icon="el-icon-upload2" v-has="'PEXPORT'" @click="BtnExport">导出</el-button> -->
                  </td>
              </tr>
          </table>
      </div>
      <div class="pagecenter">
          <!-- @current-change="CurrentChangeEvent"  -->
          <!-- 工作组模式 -->
          <vxe-table v-if="qmode=='1'" ref="lxTable1" :data.sync="mainTableData" :loading="bLoading" class="table2style" height="auto" border size="mini" :sort-config="{ trigger: 'cell' }" resizable stripe highlight-current-row header-align="center" show-overflow show-footer :footer-method="footerMethod1" @cell-dblclick="rCellDblClick" :key="tablekey">
              <vxe-table-column type="index" title="NO." width="40" header-align="center" align="center"></vxe-table-column>
              <vxe-table-column field="labgroupid" title="工作组ID" width="100" align="center"></vxe-table-column>
              <vxe-table-column field="labgroupname" title="工作组名称" width="160"></vxe-table-column>
              <vxe-table-column field="rptitemcnt" title="个数" width="100" align="center"></vxe-table-column>
              <vxe-table-column field="passcv" title="CV合格数" width="100" align="center"></vxe-table-column>
              <vxe-table-column field="cvrate" title="CV合格率" width="100" header-align="center" align="right"></vxe-table-column>
          </vxe-table>
          <!-- 按仪器、批号、水平 -->
          <vxe-table v-if="qmode=='0'" ref="lxTable0" :data.sync="mainTableData0" :loading="bLoading" class="table2style" height="auto" border size="mini" :sort-config="{ trigger: 'cell' }" resizable stripe highlight-current-row header-align="center" show-overflow show-footer :footer-method="footerMethod0" :key="tablekey">
              <vxe-table-column type="index" title="NO." width="40" header-align="center" align="center"></vxe-table-column>
              <vxe-table-column field="instrid" title="仪器ID" width="60" align="center"></vxe-table-column>
              <vxe-table-column field="instrname" title="仪器名称" width="150" header-align="center" align="left"></vxe-table-column>
              <vxe-table-column field="rpt_itemname" title="报告项目" width="150" header-align="center" align="left"></vxe-table-column>
              <vxe-table-column field="qclevel" title="水平" width="90" align="center"></vxe-table-column>
              <vxe-table-column field="maxcv" title="允许最大CV" width="90" header-align="center" text-align="right"></vxe-table-column>
              <vxe-table-column field="cv" title="加权CV" width="90" header-align="center" text-align="right" :formatter="['toFixedString', 2]"></vxe-table-column>
              <vxe-table-column field="flag" title="合格" width="100" align="center"></vxe-table-column>
          </vxe-table>
      </div>
      <el-dialog width="1100px" title="查看明细" v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" :visible.sync="bunquaildlg" :destroy-on-close="true">
          <div style="height: 500px; width: 100%">
              <div style="height: 100%">
                  <vxe-table ref="reqtable" :data.sync="unquaildata" :select-config="{ reserve: true }" :sort-config="{ trigger: 'cell' }" border height="auto" highlight-current-row highlight-hover-column highlight-hover-row how-header-overflow resizable show-overflow size="mini" show-header-overflow :optimization="{ animat: false }" header-align="center" :cell-class-name="CellClassName">
                      <vxe-table-column field="showinstr" title="仪器" width="150"></vxe-table-column>
                      <vxe-table-column field="batchno" title="批号" width="110"></vxe-table-column>
                      <vxe-table-column field="showrptitem" title="质控项目" width="180" align="center"></vxe-table-column>
                      <vxe-table-column field="qclevel" title="水平" width="80" align="center"></vxe-table-column>
                      <vxe-table-column field="qcdate" title="质控日期" align="center" width="75" :formatter="['toDateString', 'yyyy-MM-dd']"></vxe-table-column>
                      <vxe-table-column field="qccv" title="允许最大CV" width="90" align="center"></vxe-table-column>
                      <vxe-table-column field="cp_calculatecv" title="当前CV" width="90" align="center" :formatter="['toFixedString', 2]"></vxe-table-column>
                      <vxe-table-column field="showmsg" title="合格" width="70" align="center"></vxe-table-column>
                  </vxe-table>
              </div>
          </div>
      </el-dialog>
  </div>
</template>

<script>
import rmLayoutRight from "../../../rmcompents/rm-layout-right.vue";
import XE from "xe-utils"; //引入工具类

export default {
  components: { rmLayoutRight },
  name: "LIS549",
  data() {
      return {
          sel_startdt: XE.toDateString(new Date(), "yyyy-MM-01"),
          sel_enddt: XE.toDateString(new Date(), "yyyy-MM-dd"),
          datemonth: XE.toDateString(new Date(), "yyyy-MM"),
          ishaverptitem: "1",
          mainTableData0: [],
          mainTableData: [],
          detailTableData: [],
          bLoading: false,
          rightLoading: false,
          allrptitemcnt: 0,
          allpasscv: 0,
          allcvrate: "0.00%",
          unquaildata: [],
          bunquaildlg: false,
          qmode: "0",
          daytype: "0",
          datename: "统计月份",
          //按仪器，批号，水平
          m0cnt: 0,
          m0quacnt:0,
          m0unquacnt: 0,
          m0passpercent: 0,
          tablekey:0,
      };
  },
  created() {},
  methods: {
      handleCommand(name) {
          this.datename = name;
          if (name == "统计月份") this.daytype = "0";
          else if (name == "统计日期") this.daytype = "1";
      },
      CellClassName({ row, column }) {
          if (column.property == "showmsg") {
              if (row.showmsg == "合格") {
                  return "greenrow";
              } else return "redrow";
          } else {
              return "";
          }
      },
      rCellDblClick({ row, column }) {
          this.unquaildata = [];
          this.selrow = row;
          if (XE.toInteger(row.rptitemcnt) == 0) {
              this.$message.info("请选择有效数据查询");
              return false;
          }
          this.bunquaildlg = true;
          this.$tool
              .request({
                  url: "LIS/LIS5/LIS549",
                  method: "post",
                  data: {
                      action: "querydetail",
                      startdt: this.sel_startdt,
                      enddt: this.sel_enddt,
                      labgroupid: row.labgroupid,
                  },
              })
              .then((res) => {
                  if (res.dt && res.dt.length > 0) {
                      this.unquaildata = res.dt;
                  }
              })
              .catch((e) => {});
      },
      //按工作组查询
      queryGroup() {
          this.mainTableData = [];
          this.detailTableData = [];
          this.allrptitemcnt = 0;
          this.allpasscv = 0;
          this.allcvrate = "0.00%";
          this.bLoading = true;
          this.$tool
              .request({
                  url: "LIS/LIS5/LIS549",
                  method: "post",
                  timeout: 600000,
                  data: {
                      action: "query",
                      startdt: this.sel_startdt,
                      enddt: this.sel_enddt,
                      datemonth: this.datemonth,
                      daytype: this.daytype,
                      ishaverptitem: this.ishaverptitem,
                  },
              })
              .then((res) => {
                   this.tablekey++;
                  this.mainTableData = res.dt;
                  if (res.dt != null && res.dt.length > 0) {
                      this.allrptitemcnt = res.allrptitemcnt;
                      this.allpasscv = res.allpasscv;
                      this.allcvrate = res.allcvrate;
                      this.$refs.lxTable1.setCurrentRow(res.dt[0]);
                  } else {
                      this.$refs.lxTable1.setCurrentRow(null);
                      this.detailTableData = [];
                  }
                  this.bLoading = false;
              })
              .catch((e) => {
                  this.$alert(e, "error");
                  this.bLoading = false;
              });
      },
      //按照项目查询
      queryItem() {
          this.mainTableData = [];
          this.detailTableData = [];
          this.allrptitemcnt = 0;
          this.allpasscv = 0;
          this.allcvrate = "0.00%";
          this.bLoading = true;
          this.$tool
              .request({
                  url: "LIS/LIS5/LIS549",
                  method: "post",
                  timeout: 600000,
                  data: {
                      action: "query2",
                      startdt: this.sel_startdt,
                      enddt: this.sel_enddt,
                      datemonth: this.datemonth,
                      daytype: this.daytype,
                      ishaverptitem: this.ishaverptitem,
                  },
              })
              .then((res) => {
                  this.mainTableData0 = res.dt1;
                  this.tablekey++;
                  if (res.dt1 != null && res.dt1.length > 0) {
                      this.m0cnt = res.cnt;
                      this.m0quacnt = res.quacnt;
                      this.m0unquacnt = res.unquacnt;
                      this.m0passpercent = res.passpercent;
                  } else {
                      this.m0cnt = 0;
                      this.m0quacnt = 0;
                      this.m0unquacnt = 0;
                      this.m0passpercent = "0.00%";
                      this.mainTableData0 = [];
                  }
                  this.bLoading = false;
              })
              .catch((e) => {
                  this.$alert(e, "error");
                  this.bLoading = false;
              });
      },
      btnQuery() {
          if (this.qmode == "0") this.queryItem();
          else this.queryGroup();
      },
      modeChange() {
          this.mainTableData = [];
          this.mainTableData0 = [];
          this.m0cnt= 0;
          this.m0quacnt=0;
          this.m0unquacnt= 0;
          this.m0passpercent=0;
          this.tablekey++;
      },
      CurrentChangeEvent({ row, column }) {},
      BtnExport() {
          let options = {
              filename: "LIS549 内部查询-仪器原始数据查询.csv",
          };
          if (this.qmode == "1") this.$refs.lxTable1.exportCsv(options);
          else this.$refs.lxTable0.exportCsv(options);
      },
      clearTableData() {
          this.mainTableData = [];
          this, (this.detailTableData = []);
      },
      footerMethod0({ columns, data }) {
          return [
              columns.map((column, columnIndex) => {
                  if (columnIndex === 0) {
                      return "统计";
                  }
                  if (["qclevel", "maxcv", "cv", "flag"].includes(column.property)) {
                      if (column.property == "qclevel") {
                          return "总数：" + this.m0cnt;
                      }
                      if (column.property == "maxcv") {
                          return "合格数：" + this.m0quacnt;
                      }
                      if (column.property == "cv") {
                          return "不合格数：" + this.m0unquacnt;
                      }
                      if (column.property == "flag") {
                          return "合格率：" + this.m0passpercent;
                      }
                  }
                  return null;
              }),
          ];
      },
      footerMethod1({ columns, data }) {
          return [
              columns.map((column, columnIndex) => {
                  if (columnIndex === 0) {
                      return "统计";
                  }
                  if (["rptitemcnt", "qcitemcnt", "qcrate"].includes(column.property)) {
                      if (column.property == "rptitemcnt") {
                          return this.allrptitemcnt;
                      }
                      if (column.property == "qcitemcnt") {
                          return this.allpasscv;
                      }
                      if (column.property == "qcrate") {
                          return this.allcvrate;
                      }
                  }
                  return null;
              }),
          ];
      },
  },
};
</script>

<style scoped>
table {
  font-size: 12px;
  border-collapse: separate;
  border-spacing: 5px;
}
::v-deep .vxe-table.t--border .vxe-header--column {
  border-bottom: 1px solid #cccccc;
}

.table2style tr td {
  white-space: nowrap;
}
.pagetop {
  width: 100%;
  height: 78px;
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  position: absolute;
  z-index: 99;
  border: 1px solid #ccc;
  text-align: left;
}
::-webkit-scrollbar {
  width: 15px;
  height: 15px;
  border: 4px solid white;
}
::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
}
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}
/* Buttons */
::-webkit-scrollbar-button:single-button {
  background-color: #bbbbbb;
  display: block;
  border-style: solid;
  height: 5px;
  width: 5px;
}
/* Left */
::-webkit-scrollbar-button:horizontal:decrement {
  margin-right: 2px;
  border-width: 2px 0px 2px 0;
  border-color: #f1f1f1 #505050 #f1f1f1 #f1f1f1;
  background-color: #000000;
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
  border-color: #d2d2d2 #505050 #d2d2d2 #d2d2d2;
}
/* Right */
::-webkit-scrollbar-button:horizontal:increment {
  margin-left: 2px;
  border-width: 2px 0 2px 4px;
  border-color: #f1f1f1 #f1f1f1 #f1f1f1 #505050;
  background-color: #000000;
}
::-webkit-scrollbar-button:horizontal:increment:hover {
  border-color: #d2d2d2 #d2d2d2 #d2d2d2 #505050;
}

.cut {
  width: 20px;
  background-color: #fff;
  background-image: none;
  border-radius: 0px;
  border: 1px solid #dcdfe6;
  height: 28px;
  line-height: 27px;
}
.search-param {
  display: flex;
}
.search-title {
  width: 50px;
  text-align: right;
}

.pagecenter {
  position: absolute;
  top: 82px;
  width: 100%;
  left: 0;
  bottom: 5px;
}
.search-param_text {
  margin-left: 5px;
}
.search-param .el-input {
  width: 120px;
}
.search-param .el-input--small .el-input__inner {
  height: 26px !important;
  line-height: 26px !important;
}
.search-btn {
  float: right;
  /*margin: 5px 5px 0 0;*/
  margin-left: 95px;
  text-align: right;
}
.page-bottom {
  margin-top: 108px;
  position: absolute;
  font-size: 12px;
  width: 100%;
  height: calc(100% - 108px);
}
.redrow {
  background-color: #f0a2a2 !important;
}
.pgreenrow {
  background-color: #61df50 !important;
}
</style>